<#macro scriptMacro>
  <script>
    layui.use(['form', 'upload'], function () {
      let upload = layui.upload,
          $ = layui.jquery;

      upload.render({
        elem: '#selectCoverBtn'
        , url: '/music/uploadCover'
        , multiple: false
        , accept: 'images'
        , exts: 'jpg|png|jpeg'
        , drag: false
        , auto: true
        , size: 20480 //限制文件大小，单位 KB
        , done: function (res) {
          console.log(res);
          layMsg(res.msg);
          if (res.success) {
            let coverUrl = res.data;
            $('input[name=coverUrl]').val(coverUrl);
          }
        }, choose: function (obj) {
          obj.preview(function (index, file, result) {
            $("#coverPreviewDiv").html('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="max-width:120px;height: auto;max-height: 120px;">');
          });
        }
      });

      upload.render({
        elem: '#selectMusicBtn'
        , url: '/music/uploadMusic'
        , multiple: false
        , accept: 'file'
        , exts: 'mp3'
        , drag: false
        , auto: true
        , size: 20480 //限制文件大小，单位 KB
        , done: function (res) {
          console.log(res);
          layMsg(res.msg);
          if (res.success) {
            let musicUrl = res.data;
            $('input[name=musicUrl]').val(musicUrl);
            $("#musicUrlHolder").html(musicUrl);
            $("#previewMusicBtn").attr("href", musicUrl);
          }
        }
      });

      $("#saveMusicBtn").on('click', function () {
        $.post("${request.contextPath}/music/saveMusic", $("#musicForm").serialize(), function (result) {
          layMsg(result.msg);
          if (result.success) {
            setTimeout(function () {
              var iframeIndex = parent.layer.getFrameIndex(window.name);
              parent.reloadTable();
              parent.layer.close(iframeIndex);
            }, 1000);
          }
        })
      })
    })
  </script>
</#macro>

<#macro styleMacro>
  <style>
    .preview-box {
      display: inline-block;
    }

    .preview-box img {
      margin: 10px 0;
    }
  </style>
</#macro>

<@zlt.page scriptMacro=scriptMacro styleMacro=styleMacro>
  <body>
  <form class="layui-form" id="musicForm">
    <input type="hidden" name="id" value="${musicId!}"/>
    <div class="layui-form-item">
      <label class="layui-form-label"><span class="must">*</span>音乐名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="请输入音乐名称" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">演唱者</label>
      <div class="layui-input-block">
        <input type="text" name="artist" placeholder="输入演唱者名称" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">上传封面</label>
      <div class="layui-input-block">
        <input type="hidden" name="coverUrl"/>
        <button type="button" id="selectCoverBtn" class="layui-btn layui-btn-primary"><i class="fas fa-upload"></i>
          选择封面
        </button>
        <br>
        <div id="coverPreviewDiv" class="preview-box"></div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label"><span class="must">*</span>上传歌曲</label>
      <div class="layui-input-block">
        <input type="hidden" name="musicUrl"/>
        <button type="button" id="selectMusicBtn" class="layui-btn layui-btn-primary"><i class="fas fa-upload"></i>
          选择歌曲
        </button>
        <a type="button" target="_blank" id="previewMusicBtn" class="layui-btn layui-btn-success">
          试听
        </a><br>
        <p id="musicUrlHolder" style="margin-top: 5px"></p>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">&nbsp;</label>
      <div class="layui-input-block">
        <button type="button" id="saveMusicBtn" class="layui-btn layui-btn-success">
          保存
        </button>
      </div>
    </div>
  </form>
  </body>
</@zlt.page>